<template>
  <div class="container">
    <!-- <div class="input_modal">
      <el-button
        type="primary"
        size="medium"
        icon="el-icon-success"
      >启用</el-button>
      <el-button
        type="danger"
        size="medium"
        icon="el-icon-error"
      >禁用</el-button>
    </div> -->
    <div class="input_modal">
      <div class="input-item">
        <span>User ID：</span>
        <el-input
          v-model="id"
          placeholder="请输入"
          class="proName"
          @keyup.enter.native="searchCity"
        />
      </div>
      <div class="input-item">
        <span>昵称：</span>
        <el-input
          v-model="nickNameLike"
          placeholder="请输入"
          class="proName"
          @keyup.enter.native="searchCity"
        />
      </div>
      <div class="input-item">
        <span>手机号：</span>
        <el-input
          v-model="mobileLike"
          placeholder="请输入"
          class="proName"
          @keyup.enter.native="searchCity"
        />
      </div>
      <div class="input-item">
        <span>最后交易时间：</span>
        <el-input
          v-model="name"
          placeholder="请输入"
          class="proName"
          @keyup.enter.native="searchCity"
        />
      </div>
      <!-- <div class="input-item">
        <span>状态：</span>
        <el-select
          v-model='categoryParentId'
          placeholder='-请选择-'
          style="height: 30px;  line-height: 30px;width:200px;"
        >
          <el-option
            label="全部"
            value=""
          ></el-option>
          <el-option
            label="已启用"
            value="y"
          ></el-option>
          <el-option
            label="已禁用"
            value="n"
          ></el-option>
        </el-select>
      </div> -->
      <el-button
        type="primary"
        size="medium"
        @click="getList"
      >查询</el-button>
    </div>
    <div class="table_con">
      <el-table
        :data="tableData"
        :border='true'
        v-loading="loading"
      >
        <el-table-column
          prop="id"
          label="User Id"
        ></el-table-column>
        <el-table-column
          prop="weight"
          label="头像"
        >
          <template slot-scope="scope">
            <img
              style="width:50px;height:50px;border-radius:50%"
              :src="scope.row.avatarUrl"
              alt=""
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="userName"
          label="昵称"
        ></el-table-column>
        <el-table-column
          prop="mobile"
          label="手机号"
        ></el-table-column>
        <el-table-column
          prop="gmtCreated"
          label="注册时间"
        ></el-table-column>
        <!-- <el-table-column
          prop="weight"
          label="状态"
        >
          <template slot-scope="scope">
            {{scope.row.isFrozen == 'y'?'已禁用':'已启用'}}
          </template>
        </el-table-column> -->
        <el-table-column
          prop=""
          label="操作"
        >
          <template slot-scope="scope">
            <!--<el-button type="primary" size="mini" @click="changeStatus(scope.row.id,scope.row.isSale)">{{scope.row.isSale=='y'?'下架':'上架'}}</el-button>-->
            <!--<el-button type="primary" size="mini" @click="editItem(scope.row.id,'check')">查看</el-button>-->
            <el-button
              type="primary"
              size="mini"
              @click="$router.push('/userDetail?id='+scope.row.id)"
            >查看</el-button>
            <!-- <el-button
              type="primary"
              size="mini"
              @click="handleForbid(scope.row.id,scope.row.isFrozen)"
            >{{scope.row.isFrozen == 'y'?'启用':'禁用'}}</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        :page-sizes='[10,20,30,40]'
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageCount"
      >
      </el-pagination>
    </div>

  </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");
export default {
  data() {
    return {
      base: "",
      nameLike: "",
      isSale: "",
      statusList: [
        { label: "全部", value: "" },
        { label: "上架", value: "y" },
        { label: "下架", value: "n" }
      ],
      tableData: [],
      nickNameLike: "",
      mobileLike: "",
      pageCount: null,
      pageIndex: 1,
      pageSize: 10,
      loading: true,
      id: "",
      name: ""
    };
  },
  mounted() {
    this.pageIndex = this.$router.currentRoute.query.pageIndex
      ? this.$router.currentRoute.query.pageIndex
      : 1;
    this.getList();
  },
  methods: {
    getList: function() {
      let url = CONSTANT.URL.LIST.USERLIST;
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        id:this.id,
        nickNameLike: this.nickNameLike,
        mobileLike: this.mobileLike
      };
      this.loading = true;
      common.post(url, data, res => {
        this.loading = false;
        let data = res.data;
        this.tableData = data.bussData;
        this.pageCount = data.pageCount * this.pageSize;
      });
    },
    deleteItem(id) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url = CONSTANT.URL.LIST.DELETEGOOD;
          common.requestAjax(url, null, { id: id }, res => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getList();
            } else {
              this.$message({
                type: "warning",
                message: res.msg
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleForbid(id, state) {
      this.$confirm(`是否${state == "y" ? "启用用户" : "禁用用户"}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url =
            state == "y"
              ? CONSTANT.URL.LIST.UNFROZEN
              : CONSTANT.URL.LIST.FROZEN;
          common.get(url, id, res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.getList();
            } else {
              this.$message({
                type: "warning",
                message: res.data.errMsg
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    addItem() {
      this.$router.push("/productEdit");
    },
    editItem(id, type) {
      if (id == 1) {
        this.$router.push({
          name: "homeAdModal",
          query: { id: id, type: type, pageIndex: this.pageIndex }
        });
      } else if (id == 2) {
        this.$router.push({
          name: "homeBanner",
          query: { id: id, type: type, pageIndex: this.pageIndex }
        });
      } else if (id == 3) {
        this.$router.push({
          name: "homeFuncMenu",
          query: { id: id, type: type, pageIndex: this.pageIndex }
        });
      }
    },
    search: function(e) {
      if (e.keyCode == 13) {
        this.pageIndex = 1;
        this.getList();
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getList();
    },
    searchCity() {}
  },
  filters: {
    formatStatus(value) {
      var list = [];
      list["y"] = "上架";
      list["n"] = "下架";
      if (value) {
        return list[value];
      } else {
        return "--";
      }
    }
  }
};
</script>
